<template>
  <div class="charts-container">
    <div class="row first-row">
      <BarChartComponent class="echart-container" :chartData="firstRowCharts1"/>
      <!--      <PieChartComponent class="echart-container" :chartData="firstRowCharts2"/>-->
      <BarChartComponent class="echart-container" :chartData="firstRowCharts3"/>
    </div>
    <div class="row second-row">
      <BarChartComponent class="echart-container" :chartData="singleChartData"/>
    </div>
  </div>
</template>

<script setup>
import BarChartComponent from '@/components/echartComponent/BarChartComponent.vue';
import {ref, reactive} from 'vue';

// import {
//   inWaterSourceConservation,
//   inSoilConservation,
//   inNegativeOxygenIons,
//
//   inAirPurification,
//   inWaterPurification,
//   inCarbonSequestration,
//
//   inOxygenRelease,
//   inClimateRegulation,
//
//   outCalcFloodRegulation,
//   outCalcBiodiversityProtection,
//   outCalcNoiseReduced,
//   outGepRegulationService,
//
//   outCalcMaterialSupply,
//   outEcologicalEnergy,
//   outCalcWaterResources,
//   outGepSupplyService,
//
//   outTourismHealth,
//   outCalcLeisureRecreation,
//   outCalcLandscapeAppreciation,
//   outGepCulturalService,
// } from "@/api/gepApi"
import {
  useGepCulturalServiceStore,
  useGepDataStore,
  useGepRegulationServiceStore,
  useGepSupplyServiceStore
} from "@/stores/gep";
import {storeToRefs} from "pinia";

const gepSupplyServiceStore = useGepSupplyServiceStore();
const gepRegulationServiceStore = useGepRegulationServiceStore();
const gepCulturalServiceStore = useGepCulturalServiceStore();
const gepDataStore = useGepDataStore();

const {
  outGepSupplyService,
} = storeToRefs(gepSupplyServiceStore);
const {
  outGepCulturalService,
  outTourismHealth,
  outCalcLandscapeAppreciation,
  outCalcLeisureRecreation,
} = storeToRefs(gepCulturalServiceStore);
const {
  outGepRegulationService,
  outCalcBiodiversityProtection,
  outCalcNoiseReduced,

  inFloodRegulation,
  inAirPurification,
  inCarbonSequestration,
  inClimateRegulation,
  inSoilConservation,
  inWaterPurification,
  inWaterSourceConservation
} = storeToRefs(gepRegulationServiceStore);


const showDataLabel = storeToRefs(gepDataStore); // 是否显示柱子的标签

// 定义柱子颜色数组
const colors = ['#33caca', '#37a1d6', '#c2c2c2'];
// 柱子的宽度
const barWidth = 25;
// x轴的标签字体
const barFontSize = 16;

// 设定数据
const barData1 = gepSupplyServiceStore.barData1;

const pieData = reactive([
  {value: outGepSupplyService.value.toFixed(2), name: '物质供给服务', itemStyle: {color: '#33caca'}},
  {value: outGepRegulationService.value.toFixed(2), name: '生态调节服务', itemStyle: {color: '#c2c2c2'}},
  {value: outGepCulturalService.value.toFixed(2), name: '娱乐文化服务', itemStyle: {color: '#37a1d6'}},
]);

const barData2 = reactive([
  {value: outCalcLeisureRecreation.value, name: '休闲游憩', itemStyle: {color: '#37a1d6'}},
  {value: outCalcLandscapeAppreciation.value, name: '景观增值', itemStyle: {color: '#37a1d6'}},
  {value: outTourismHealth.value, name: '旅游康养', itemStyle: {color: '#37a1d6'}},
]);
const barData3 = [
  {value: inWaterSourceConservation.value, name: '水源涵养', itemStyle: {color: '#7483d6'}},
  {value: inSoilConservation.value, name: '土壤保持', itemStyle: {color: '#7483d6'}},
  // { value: inNegativeOxygenIons.value, name: '负氧离子', itemStyle: { color: '#7483d6' } },

  {value: inAirPurification.value, name: '空气净化', itemStyle: {color: '#7483d6'}},
  {value: inWaterPurification.value, name: '水质净化', itemStyle: {color: '#7483d6'}},
  {value: inCarbonSequestration.value, name: '固碳价值', itemStyle: {color: '#7483d6'}},

  // { value: inOxygenRelease.value, name: '释氧价值', itemStyle: { color: '#7483d6' } },
  {value: inClimateRegulation.value, name: '气候调节', itemStyle: {color: '#7483d6'}},
  {value: inFloodRegulation.value, name: '洪水调蓄', itemStyle: {color: '#7483d6'}},

  {value: outCalcBiodiversityProtection.value, name: '生物多样性保护', itemStyle: {color: '#7483d6'}},
  {value: outCalcNoiseReduced.value, name: '噪音消减', itemStyle: {color: '#7483d6'}},
];
// 计算最大值并设置 Y 轴最大值为最大值的 130%
const maxValue1 = Math.max(...barData1.map(item => item.value)); // 获取最大值
const yAxisBarData1Max = maxValue1 * 1.3; // 计算 130%
const maxValue2 = Math.max(...barData2.map(item => item.value)); // 获取最大值
const yAxisBarData2Max = maxValue2 * 1.3; // 计算 130%
const maxValue3 = Math.max(...barData3.map(item => item.value)); // 获取最大值
const yAxisBarData3Max = maxValue3 * 1.3; // 计算 130%


// 第一行三个图表的数据
const firstRowCharts1 = ref(
    {
      type: 'bar',
      title: {
        text: '生态物质供给价值',
        left: 37, // 标题居中
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 20,
          fontWeight: 'bold',
          fontFamily: 'sans-serif',
        },
        // backgroundColor: 'rgba(255,255,255,0.93)', // 标题背景颜色
        padding: 10, // 标题内边距
        // borderColor: '#ccc', // 边框颜色
        // borderWidth: 1, // 边框宽度
        // borderRadius: 5 // 边框圆角
      },
      xAxis: {
        type: 'category',
        data: barData1.map(item => item.name), // 使用提供的数据的名称作为 x 轴数据
        // boundaryGap:false,
        axisLabel: {
          color: '#fff', // X 轴标签颜色
          fontSize: barFontSize,
        },
        axisTick: {
          show: true, // 隐藏 X 轴刻度线
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#aeaaaa', // X 轴线颜色
          },
        },
      },
      yAxis: {
        type: 'value',
        // max: Math.max(barData1.map(item => item.value))*1.5, // 设置 Y 轴的最大值为 250
        max: yAxisBarData1Max,
        axisLabel: {
          show: false, // 隐藏 Y 轴标签
          color: '#fff', // Y 轴标签颜色
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff', // Y 轴线颜色
          },
        },
        splitLine: {
          show: false, // 隐藏 Y 轴分隔线
        },
      },
      grid: {
        show: false,
        top: '12%',
        left: 37,
        right: '1%',
        bottom: '3%',
        containLabel: true // 确保标签不被遮挡
      },
      series: [
        {
          name: '物质供给',
          type: 'bar',
          data: barData1.map(item => ({
            value: item.value.toFixed(2),
            itemStyle: {color: item.itemStyle.color}, // 为每根柱子设置颜色
          })),
          barWidth: barWidth, // 柱子的宽度
          barMinHeight: 5, // 设置最小高度为 5px
          label: {
            show: showDataLabel, // 显示数据标签
            position: 'top', // 标签位置在柱子上方
            color: '#fff', // 标签字体颜色
            fontSize: barFontSize,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgb(255,255,255)', // 高亮时柱子外侧的阴影颜色
            },
          },

        },
      ],
    }
);
const firstRowCharts2 = ref(
    {
      // title: '生态产品价值占比',
      type: 'pie',
      title: {
        text: '生态产品价值占比',
        left: 'center', // 标题居中
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 20,
          fontWeight: 'bold',
          fontFamily: 'sans-serif',
        },
        // backgroundColor: '#0b3e6a', // 标题背景颜色
        padding: 10, // 标题内边距
        // borderColor: '#ccc', // 边框颜色
        // borderWidth: 1, // 边框宽度
        // borderRadius: 5 // 边框圆角
      },
      legend: {
        show: true,
        itemGap: 25, // 设置每项之间的间隔为 15 像素
        orient: "vertical",
        right: '8%',
        top: "40%",
        // width:'20%',
        // padding: [53, 10],
        itemWidth: 15,
        itemHeight: 10,
        textStyle: {
          color: '#fff', // 设置图例字体颜色为白色
          fontSize: 18,
          // fontWeight: 'bold',
          fontFamily: 'sans-serif',
        },
      },
      data: pieData,
      center: ['30%', '60%'], // 将饼状图设置在左边（30%为左侧位置）
      radius: ['50%'], // 饼图半径
      seriesName: '生态产品价值占比', // series name

    }
);
const firstRowCharts3 = ref(
    {
      type: 'bar',
      title: {
        text: '娱乐文化服务价值',
        left: '1%', // 标题居中
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 20,
          fontWeight: 'bold',
          fontFamily: 'sans-serif',
        },
        // backgroundColor: '#0b3e6a', // 标题背景颜色
        padding: 10, // 标题内边距
        // borderColor: '#ccc', // 边框颜色
        // borderWidth: 1, // 边框宽度
        // borderRadius: 5 // 边框圆角
      },
      xAxis: {
        type: 'category',
        data: barData2.map(item => item.name), // 使用提供的数据的名称作为 x 轴数据
        axisLabel: {
          color: '#fff', // X 轴标签颜色
          fontSize: barFontSize,
        },
        axisLine: {
          lineStyle: {
            color: '#aeaaaa', // X 轴线颜色
          },
        },
      },
      yAxis: {
        type: 'value',
        max: yAxisBarData2Max,
        axisLabel: {
          show: false, // 隐藏 Y 轴标签
          color: '#aeaaaa', // Y 轴标签颜色
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#fff', // Y 轴线颜色
          },
        },
        splitLine: {
          show: false, // 隐藏 Y 轴分隔线
        },
      },
      grid: {
        top: '12%',
        left: '3%',
        right: 25,
        bottom: '3%',
        containLabel: true // 确保标签不被遮挡
      },
      series: [
        {
          name: '文化服务',
          type: 'bar',
          data: barData2.map(item => ({
            value: item.value.toFixed(2),
            itemStyle: {color: item.itemStyle.color}, // 为每根柱子设置颜色
          })),
          barWidth: barWidth, // 柱子的宽度
          barMinHeight: 5, // 设置最小高度为 5px
          label: {
            show: showDataLabel, // 显示数据标签
            position: 'top', // 标签位置在柱子上方
            color: '#fff', // 标签字体颜色
            fontSize: barFontSize,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgb(255,255,255)', // 高亮时柱子外侧的阴影颜色
            },
          },

        },
      ],
    }
);

// 第二行单个图表的数据
const singleChartData = ref(
    {
      type: 'bar',
      title: {
        text: '生态调节服务价值',
        left: 37, // 标题居中
        top: '5%',
        textStyle: {
          color: '#ffffff',
          fontSize: 20,
          fontWeight: 'bold',
          fontFamily: 'sans-serif',
        },
        // backgroundColor: '#0b3e6a', // 标题背景颜色
        padding: 10, // 标题内边距
        // borderColor: '#ccc', // 边框颜色
        // borderWidth: 1, // 边框宽度
        // borderRadius: 5 // 边框圆角
      },
      xAxis: {
        type: 'category',
        data: barData3.map(item => item.name), // 使用提供的数据的名称作为 x 轴数据
        axisLabel: {
          color: '#fff', // X 轴标签颜色
          // rotate: 45, // 标签旋转
          interval: 0, // 显示所有标签
          fontSize: barFontSize,
        },
        axisLine: {
          lineStyle: {
            color: '#aeaaaa', // X 轴线颜色
          },
        },
      },
      yAxis: {
        type: 'value',
        max: yAxisBarData3Max,
        axisLabel: {
          show: false, // 隐藏 Y 轴标签
          color: '#fff', // Y 轴标签颜色
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#aeaaaa', // Y 轴线颜色
          },
        },
        splitLine: {
          show: false, // 隐藏 Y 轴分隔线
        },
      },
      grid: {
        top: '2%',
        left: 37,
        right: 25,
        bottom: '3%',
        containLabel: true // 确保标签不被遮挡
      },
      series: [
        {
          name: '调节服务',
          type: 'bar',
          data: barData3.map(item => ({
            value: item.value.toFixed(2),
            itemStyle: {color: item.itemStyle.color}, // 为每根柱子设置颜色
          })),
          barWidth: barWidth, // 柱子的宽度

          label: {
            show: showDataLabel, // 显示数据标签
            position: 'top', // 标签位置在柱子上方
            color: '#fff', // 标签字体颜色
            fontSize: barFontSize,
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgb(255,255,255)', // 高亮时柱子外侧的阴影颜色
            },
          },

        },
      ],
    }
);


</script>

<style scoped>

.charts-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 设置总高度为100vh */
  width: 100%;
}

.row {
  display: flex;
  flex: 1; /* 每行占据剩余高度 */
  justify-content: space-between;
  align-items: stretch; /* 让组件高度一致 */
}

.first-row {
  height: 50%; /* 第一行占70%高度 */
}

.second-row {
  height: 50%; /* 第二行占30%高度 */
}

.echart-container {
  width: 100%;
  height: 100%; /* 容器高度设置为100% */

  flex: 1; /* 每个组件占据相同的宽度 */
  margin: 10px; /* 为组件之间添加间距 */
  min-width: 0; /* 防止溢出 */
}
</style>
